<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑文章弹出框</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/post.css">
    <link rel="stylesheet" href="css/dialog.css">
    <link rel="stylesheet" href="css/calendar.css">
</head>
<body>
    <div class="dialogCover pf"></div>
    <!--编辑文章-->
    <div class="editorDialog dialog pf ">
        <div class="titleBox clearfix">
            <p class="title fl">快来发文章，把文章分享给粉丝们吧！</p>
            <a class="fr close" href="javascript:void(0);"><i class="fa fa-close"></i></a>
        </div>
        <div class="content br5 border1">
            <!--添加分类-->
            <div class="workCover">
                <div class="selectClassify pr">
                    <span>*</span>
                    <a href="javascript:void(0);" class="selectedBox border1 br5 dib clearfix">
                        <div class="selectedShow tac fl">选择图片类型</div>
                        <div class="selectIcon fr"><span></span></div>
                    </a>
                    <div class="selectionBox br5 pa">
                        <div class="singleSlect">
                            <label><input type="radio" name="classify" checked>原创</label>
                            <label><input type="radio" name="classify">转载</label>
                        </div>
                        <div class="navBox tac clearfix">
                            <div class="mainNavBox fl">
                                <ul>
                                    <li class="item active"><a href="javascript:void(0);">数字2D</a></li>
                                    <li class="item"><a href="javascript:void(0);">数字3D</a></li>
                                    <li class="item"><a href="javascript:void(0);">影视后期</a></li>
                                    <li class="item"><a href="javascript:void(0);">传统美术</a></li>
                                    <li class="item"><a href="javascript:void(0);">素材</a></li>
                                    <li class="item"><a href="javascript:void(0);">其他</a></li>
                                </ul>
                            </div>
                            <div class="subNavBox fl">
                                <ul>
                                    <li class="item active"><a href="javascript:void(0);">平面</a></li>
                                    <li class="item"><a href="javascript:void(0);">UI设计</a></li>
                                    <li class="item"><a href="javascript:void(0);">原画</a></li>
                                    <li class="item"><a href="javascript:void(0);">插画</a></li>
                                    <li class="item"><a href="javascript:void(0);">2D动画</a></li>
                                    <li class="item"><a href="javascript:void(0);">数字绘景</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="theme">
                <div class="inputBox clearfix">
                    <div class="dib fl themeIcon"></div>
                    <div class="dib fl iunptTheme">
                        <div id="wordTags"></div>
                        <input id="wordInput" type="text" placeholder="(选择或添加新主题)">
                        <input id="wordHiddenInput" type="hidden">
                    </div>
                </div>
                <div class="themeBox">
                    <a class="dib tac" href="javascript:void(0);">主题1</a>
                    <a class="dib tac" href="javascript:void(0);">主题2</a>
                    <a class="dib tac" href="javascript:void(0);">主题3</a>
                </div>
            </div>
            <div class="tags">
                <div class="inputBox clearfix">
                    <div class="dib fl tagsIcon"><i class="fa fa-tag"></i></div>
                    <div class="dib fl iunptTag">
                        <input type="text" placeholder="(最多6个标签)">
                    </div>
                </div>
                <div class="tagBox">
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                    <a class="dib tac" href="javascript:void(0);">tag1</a>
                </div>
            </div>
            <div class="timingPost">
                <p class="text dib">定时发布时间</p>
                <div class="calendar dib border1 br5 pr clearfix" id="calendar">
                    <p class="timeChoosed fl" contenteditable="false">2018/02/05</p>
                    <a href="javascript:void(0);" class="calendarIcon db fl"><i class="fa fa-calendar"></i></a>
                </div>
                <div class="detailTime dib border1 br5 tac" contenteditable="true">14</div>
                <div class="txt dib">时</div>
                <div class="detailTime dib border1 br5 tac" contenteditable="true">20</div>
                <div class="txt dib">分</div>
            </div>
        </div>
        <div class="selectBox tar">
            <div class="authorization tal dib br5 pr border1">
                <div class="choosed clearfix">
                    <div class="fl tac text"><a href="javascript:void(0);">浏览权限</a></div>
                    <div class="fl icon tac">
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
                <div class="pa select">
                    <span class="pa triangle"></span>
                    <ul>
                        <li><a href="javascript:void(0);">仅支持者</a></li>
                        <li><a href="javascript:void(0);">免费公开</a></li>
                        <li><a href="javascript:void(0);">3天后免费公开</a></li>
                    </ul>
                </div>
            </div>
            <div class="postSetting tal dib br5 pr">
                <div class="choosed clearfix">
                    <div class="fl tac text"><a href="javascript:void(0);">发布</a></div>
                    <div class="fl icon tac">
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
                <div class="pa select">
                    <span class="pa triangle"></span>
                    <ul>
                        <li><a href="javascript:void(0);">现在发布</a></li>
                        <li><a href="javascript:void(0);">定时发布</a></li>
                        <li><a href="javascript:void(0);">保存到草稿箱</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--超链接-->
    <div class="linkDialog dialog pf dn">
        <div class="titleBox clearfix">
            <p class="text fl">请输入超链接</p>
            <p class="del fr">
                <a href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </p>
        </div>
        <div class="content">
            <div class="adress">
                <p class="txt">链接地址：<span class="info"></span></p>
                <input type="text" placeholder="http://">
            </div>
            <div class="describe">
                <p class="txt">文字描述：</p>
                <input type="text" placeholder="文字描述">
            </div>
        </div>
        <div class="btns tac">
            <a class="dib br5 tac confirm" href="javascript:void(0);">确认</a>
            <a class="dib br5 tac border1 cancel" href="javascript:void(0);">取消</a>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/calendar.js"></script>
<script src="js/aspect.js"></script>
<script src="js/keyWord.js"></script>
<script>
    $(function () {
        //编辑文章
        $(".selectBox .choosed .icon").click(function () {
            $(this).parents(".choosed").siblings(".select").slideToggle();
        });
        $(".editorDialog .inputBox input").focus(function () {
            $(this).parents(".inputBox").siblings(".themeBox").slideDown();
            $(this).parents(".inputBox").siblings(".tagBox").slideDown();
        });

        //输入关键字生成标签
        var keyWord = $("#wordInput").keyWord({
            panel: '#wordTags',
            value: '#wordHiddenInput',
            max: 6
        });

        //选择分类
        $(".editorDialog .workCover .selectClassify .selectedBox").click(function () {
            $(this).siblings(".selectionBox").toggle();
        });
        $(".editorDialog .workCover .selectClassify .mainNavBox .item").click(function () {
            $(this).parents(".selectionBox").addClass("spread");
        });

    })
</script>
</html>